﻿<html>
  <head>
    <meta name="GENERATOR" content="BLOCKNOTE.NET"/>
    <meta name="source" content="http://www.w3.org/TR/CSS21/selector.html"/>
    <basefont face="Verdana" size="2"/>
    <title>+Selectors in HTMLayout</title><style>BODY { FONT-FAMILY:Verdana; FONT-SIZE:10pt }
P { FONT-FAMILY:Verdana; FONT-SIZE:10pt }
DIV { FONT-FAMILY:Verdana; FONT-SIZE:10pt }
TD { FONT-FAMILY:Verdana; FONT-SIZE:10pt }
</style>
  </head>
<body>
<table border="1">
  <tbody><tr>
    <td>&nbsp;</td>
    <td><strong>Meaning</strong></td>
    <td><strong>Described in section</strong></td>
  </tr>
  <tr>
    <td colspan="3"><h3>CSS 2.1 selectors </h3>
					<p>Following fragment was taken from <a href="http://www.w3.org/TR/CSS21/selector.html#q2">W3C CSS 2.1 specification</a></p></td>
  </tr>
  <tr>
    <td>*</td>
    <td>Matches any element.</td>
    <td><a href="#universal-selector">Universal selector</a></td>
  </tr>
  <tr>
    <td>E</td>
    <td>Matches any E element (i.e., an element of type E).</td>
    <td><a href="#type-selectors">Type selectors</a></td>
  </tr>
  <tr>
    <td>E F</td>
    <td>Matches any F element that is a descendant of an E element.</td>
    <td><a href="#descendant-selectors">Descendant selectors</a></td>
  </tr>
  <tr>
    <td>E &gt; F</td>
    <td>Matches any F element that is a child of an element E.</td>
    <td><a href="#child-selectors">Child selectors</a></td>
  </tr>
  <tr>
    <td>E:first-child</td>
    <td>Matches element E when E is the first child of its parent.</td>
    <td><a href="#first-child">The :first-child pseudo-class</a></td>
  </tr>
  <tr>
    <td>E:link<br/>E:visited</td>
    <td>Matches element E if E is the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited).</td>
    <td><a href="#link-pseudo-classes">The link pseudo-classes</a></td>
  </tr>
  <tr>
    <td>E:active<br/>E:hover<br/>E:focus</td>
    <td>Matches E during certain user actions.</td>
    <td><a href="#dynamic-pseudo-classes">The dynamic pseudo-classes</a></td>
  </tr>
  <tr>
    <td>E + F</td>
    <td>Matches any F element immediately preceded by a sibling element E.</td>
    <td><a href="#adjacent-selectors">Adjacent selectors</a></td>
  </tr>
  <tr>
    <td>E[foo]</td>
    <td>Matches any E element with the &quot;foo&quot; attribute set (whatever the value).</td>
    <td><a href="#attribute-selectors">Attribute selectors</a></td>
  </tr>
  <tr>
    <td>E[foo=&quot;warning&quot;]</td>
    <td>Matches any E element whose &quot;foo&quot; attribute value is exactly equal to &quot;warning&quot;.</td>
    <td><a href="#attribute-selectors">Attribute selectors</a></td>
  </tr>
  <tr>
    <td>E[foo~=&quot;warning&quot;]</td>
    <td>Matches any E element whose &quot;foo&quot; attribute value is a list of space-separated values, one of which is exactly equal to &quot;warning&quot;.</td>
    <td><a href="#attribute-selectors">Attribute selectors</a></td>
  </tr>
  <tr>
    <td>E[foo%=&quot;warning&quot;]</td>
    <td>Matches any E element whose &quot;foo&quot; attribute value is a list of space-separated values, one of which is equal to &quot;warning&quot; case insensitively.</td>
    <td>non-standard</td>
  </tr>
  <tr>
    <td>E[lang|=&quot;en&quot;]</td>
    <td>Matches any E element whose &quot;lang&quot; attribute has a hyphen-separated list of values beginning (from the left) with &quot;en&quot;.</td>
    <td><a href="#attribute-selectors">Attribute selectors</a></td>
  </tr>
  <tr>
    <td>DIV.warning</td>
    <td><em>Language specific.</em> (In HTML, the same as DIV[class~=&quot;warning&quot;].)</td>
    <td><a href="#class-html">Class selectors</a></td>
  </tr>
  <tr>
    <td>E#myid</td>
    <td>Matches any E element with ID equal to &quot;myid&quot;.</td>
    <td><a href="#id-selectors">ID selectors</a></td>
  </tr>
  <tr>
    <td colspan="3"><h3>CSS 3.0 selectors</h3></td>
  </tr>
  <tr>
    <td>E:not( {simple selector} )</td>
    <td>
<div>Negation.</div>
<div>Example: E:not(:first-child) matches all E elements that are not at first child position in their containers.</div></td>
    <td><a href="http://www.w3.org/TR/css3-selectors/#negation">The negation pseudo-class</a></td>
  </tr>
  <tr>
    <td>E[foo^=&quot;val&quot;]</td>
    <td>Matches any E element having &quot;foo&quot; attribute whose value begins with the prefix &quot;val&quot;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>E[foo$=&quot;val&quot;]</td>
    <td>Matches any E element having &quot;foo&quot; attribute whose value ends with the suffix &quot;val&quot;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>E[foo*=&quot;val&quot;]</td>
    <td>Matches any E element having &quot;foo&quot; attribute whose value contains at least one instance of the substring &quot;val&quot;.</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>E:nth-child(<em>A</em>n+<em>B</em>)</td>
    <td>Matches any E element which is <em>B</em>th child of an parent element after all its children have been split into groups of <em>A</em> elements each. A and B are integer numbers.</td>
    <td rowspan="2"><a href="http://www.w3.org/TR/2001/CR-css3-selectors-20011113/#structural-pseudos">Structural Pseudo Classes</a></td>
  </tr>
  <tr>
    <td>E:nth-last-child(<em>A</em>n+<em>B</em>)</td>
    <td>Matches any E element which is <em>B</em>th child of an parent element after all its children have been split into groups of <em>A</em> elements each and counting from last to first direction.</td>
  </tr>
  <tr>
    <td>E:not(<em>simple selector</em>)</td>
    <td>Represents an element that is not represented by the <em>simple selector.</em></td>
    <td><a href="http://www.w3.org/TR/css3-selectors/#negation">Negation Pseudo Class</a></td>
  </tr>
  <tr>
    <td>E:only-child</td>
    <td>Represents an element that has a parent element and whose parent element has no other children other than this one. </td>
    <td><a href="#only-child-pseudo">:only-child pseudo-class</a></td>
  </tr>
  <tr>
    <td>E:only-of-type</td>
    <td>Represents an element that has a parent element and whose parent element has no other element children with the same element name</td>
    <td><a href="#only-of-type-pseudo">:only-of-type pseudo-class</a></td>
  </tr>
  <tr>
    <td>E:has-child-of-type(T)</td>
    <td>Represents an element that has exactly single child element of type T among its other children.</td>
    <td rowspan="2"><font color="#cc0000">Non standard, h-smile core specific.</font></td>
  </tr>
  <tr>
    <td>E:has-children-of-type(T)</td>
    <td>Represents an element that has one or more children elements of type T among its other children.</td>
  </tr>
  <tr>
    <td colspan="3"><h3>Run-time state flags (mostly h-smile core specific)</h3></td>
  </tr>
  <tr>
    <td nowrap="" valign="top"><strong>E:focus</strong></td>
    <td valign="middle">Matches element in focus state.</td>
    <td valign="middle">STATE_FOCUS</td>
  </tr>
  <tr>
    <td nowrap="" valign="top"><strong>E:tab-focus</strong></td>
    <td valign="middle">Matches element that got focus by pressing TAB keyboard button.</td>
    <td valign="middle">STATE_TABFOCUS</td>
  </tr>
  <tr>
    <td nowrap="" valign="top"><strong>E:focusable</strong></td>
    <td valign="middle">Matches any element which has tabindex defined or will accept focus. Behaviors attached to elements are responsible for &quot;focusability&quot; (accept HANDLE_FOCUS events). For example behaviors under &lt;a href&gt;'s and most of &lt;input&gt;/&lt;widget&gt; elements are focusable by default. Elements that have overflow:auto | scroll are also intrinsically focusable.</td>
    <td valign="middle">STATE_FOCUSABLE</td>
  </tr>
  <tr>
    <td nowrap="" valign="top"><strong>E:current</strong></td>
    <td valign="middle">Matches current element in collection. E.g. current &lt;option&gt; in &lt;select&gt;.</td>
    <td valign="middle">STATE_CURRENT</td>
  </tr>
  <tr>
    <td nowrap="" valign="top"><strong>E:checked</strong></td>
    <td valign="middle">Matches element in checked state. Internal behaviors <em>checkbox</em>, <em>radio</em> and <em>select</em> (for option) are known to set/reset this flag.</td>
    <td valign="middle">STATE_CHECKED</td>
  </tr>
  <tr>
    <td nowrap="" valign="top"><strong>E:disabled</strong></td>
    <td valign="middle">Matches element in disabled state. All elements in container having <em>disabled</em> attribute defined will also have this flag set.</td>
    <td valign="middle">STATE_DISABLED</td>
  </tr>
  <tr>
    <td nowrap="" valign="top"><strong>E:read-only</strong></td>
    <td valign="middle">Matches element in read-only state (with readonly attribute defined)</td>
    <td valign="middle">STATE_READONLY</td>
  </tr>
  <tr>
    <td nowrap="" valign="top"><strong>E:expanded</strong></td>
    <td valign="middle">Matches element in expanded state. Internal behavior <em>select</em> are known to set/reset this flag. Used for implementation of collapsible nodes in the &lt;select&gt;.</td>
    <td>STATE_EXPANDED</td>
  </tr>
  <tr>
    <td nowrap="" valign="top"><strong>E:collapsed</strong></td>
    <td valign="middle">Inversed to <strong>:expanded</strong> attribute. Element can have either expanded or collapsed or neither expanded nor collapsed state but not both.</td>
    <td>STATE_COLLAPSED</td>
  </tr>
  <tr>
    <td nowrap="" valign="top"><strong>E:incomplete</strong></td>
    <td valign="middle">Is set when element is in incomplete state - one of requested resources (e.g. background or foreground image) is not arrived yet.</td>
    <td valign="middle">STATE_INCOMPLETE</td>
  </tr>
  <tr>
    <td nowrap="" valign="top"><strong>E:busy</strong></td>
    <td valign="middle">E.g. is set when element requested some data to download and this data is not arrived yet. This flag can be set from code of behaviors.</td>
    <td valign="middle">STATE_BUSY</td>
  </tr>
  <tr>
    <td nowrap="" valign="top"><strong>E:empty</strong></td>
    <td valign="middle">Matches element that has no textual content and no children.</td>
    <td valign="middle">STATE_EMPTY</td>
  </tr>
  <tr>
    <td nowrap="" valign="top"><strong>E:has-child</strong></td>
    <td valign="middle">Matches element that has exactly one child.</td>
    <td valign="middle">STATE_HAS_CHILD</td>
  </tr>
  <tr>
    <td nowrap="" valign="top"><strong>E:has-children</strong></td>
    <td valign="middle">Matches element that has more than one child.</td>
    <td valign="middle">STATE_HAS_CHILDREN</td>
  </tr>
  <tr>
    <td nowrap="" valign="top"><strong>E:animating</strong></td>
    <td valign="middle">Element, at the moment, is animating e.g. expanding/collapsing</td>
    <td valign="middle">STATE_ANIMATING</td>
  </tr>
  <tr>
    <td nowrap="" valign="top"><strong>E:popup</strong></td>
    <td valign="middle">Element, at the moment, is shown as a popup.</td>
    <td valign="middle">STATE_POPUP</td>
  </tr>
  <tr>
    <td nowrap="" valign="top"><strong>E:owns-popup</strong></td>
    <td valign="middle">Element requested popup to be shown and that popup is shown at the moment.</td>
    <td valign="middle">STATE_OWNS_POPUP</td>
  </tr>
  <tr>
    <td nowrap="" valign="top"><strong>E:synthetic</strong></td>
    <td valign="middle">Element is synthesized by the engine while parsing e.g. all missed cells in tables (&lt;td&gt;) are getting this flag.</td>
    <td valign="middle">STATE_SYNTHETIC</td>
  </tr>
  <tr>
    <td nowrap="" valign="top"><strong>E:drop-target</strong></td>
    <td valign="middle">While inside the active drag-n-drop opeartion this element is a valid drop target for the dragged element.</td>
    <td valign="middle">STATE_DROP_TARGET</td>
  </tr>
  <tr>
    <td nowrap="" valign="top"><strong>E:drag-over</strong></td>
    <td valign="middle">Matches drop target element when dragged element is over it.</td>
    <td valign="middle">STATE_DRAG_OVER</td>
  </tr>
  <tr>
    <td nowrap="" valign="top"><strong>E:moving</strong></td>
    <td valign="middle">Matches drag-moving element (temporary copy of the drag-source).</td>
    <td valign="middle">STATE_MOVING</td>
  </tr>
  <tr>
    <td nowrap="" valign="top"><strong>E:copying</strong></td>
    <td valign="middle">Matches drag-copying element (temporary copy of the drag-source).</td>
    <td valign="middle">STATE_COPYING</td>
  </tr>
  <tr>
    <td nowrap="" valign="top"><strong>E:drag-source</strong></td>
    <td valign="middle">Matches drag source element in active drag-n-drop operation.</td>
    <td valign="middle">STATE_DRAG_SOURCE</td>
  </tr>
  <tr>
    <td nowrap="" valign="top"><strong>E:rtl</strong></td>
    <td valign="middle">Matches element in strictly Right-To-Left environment - when it or its nearest container has defined <em>dir</em> attribute and the value of that dir attribute is exactly &quot;rtl&quot;.</td>
    <td valign="middle">&nbsp;</td>
  </tr>
  <tr>
    <td nowrap="" valign="top"><strong>E:ltr</strong></td>
    <td valign="middle">Matches element in strictly Left-To-Right environment - when it or its nearest container has defined <em>dir</em> attribute and the value of that dir attribute is exactly &quot;ltr&quot;.</td>
    <td valign="middle">&nbsp;</td>
  </tr>
  <tr><td nowrap="" valign="top" colspan="3"><h4>Pseudo elements</h4></td></tr>
<tr><td nowrap="" valign="top"><b>::before</b></td><td valign="middle">::before creates a pseudo-element that is the first child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default.</td><td valign="middle"/></tr><tr><td nowrap="" valign="top"><b>::after</b></td><td valign="middle">::after creates a pseudo-element that is the last child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default.</td><td valign="middle"/></tr>
<tr><td nowrap="" valign="top"><b>::marker</b></td><td valign="middle">
          ::marker defines special pseudo element that is rendered on top of background layer and underneath content. The marker  gets replaced inside padding box of the element and can use flex units. For example this:
					<pre>div::marker {
  size:1em;
  margin:*;
  background:red; 
  border-radius:0.5em;
}</pre><p>will render 1em circle in the center of the div. Can be uses to add cosmetic content to elements.&nbsp;It is block element by default.</p>
</td><td valign="middle"><html>Non standard, h-smile core specific.</html></td></tr>
</tbody></table>
</body>
</html>